<template>
  <div>
    <validate-form @form-submit="onSubmitForm">
      <div class="form-group">
        <label for="registerEmail" class="mb-2">邮箱地址</label>
        <validate-input id="registerEmail" :rules="emailRule" type="email" v-model="formData.emailValue"></validate-input>
      </div>
      <div class="form-group">
        <label for="registerNickName" class="mb-2">昵称</label>
        <validate-input id="registerNickName" :rules="nickNameRule" type="text" v-model="formData.nickNameValue"></validate-input>
      </div>
      <div class="form-group">
        <label for="registerPassword" class="mb-2">密码</label>
        <validate-input
          id="registerPassword"
          :rules="passwordRule"
          type="password"
          v-model="formData.passwordValue"
        ></validate-input>
      </div>
      <div class="form-group">
        <label for="repeatPassword" class="mb-2">再次输入密码</label>
        <validate-input
          id="repeatPassword"
          :rules="repeatPasswordRule"
          type="password"
          v-model="formData.repeatPasswordValue"
        ></validate-input>
      </div>
      <template #submit>
        <button class="btn btn-primary">注册</button>
      </template>
    </validate-form>
  </div>
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent, reactive } from 'vue'
import ValidateForm from './ValidateForm.vue'
import ValidateInput, { RuleProps } from './ValidateInput.vue'
import createMessage from '../hooks/createMessage'
import { useRouter } from 'vue-router'
export default defineComponent({
  components: {
    ValidateForm,
    ValidateInput
  },
  setup () {
    const router = useRouter()
    const formData = reactive({
      emailValue: '',
      nickNameValue: '',
      passwordValue: '',
      repeatPasswordValue: ''
    })
    const emailRule: RuleProps = [
      { type: 'required', message: '邮箱不能为空' },
      { type: 'email', message: '请输入正确的邮箱格式' }
    ]
    const nickNameRule: RuleProps = [{ type: 'required', message: '昵称不能为空' }]
    const passwordRule: RuleProps = [
      { type: 'required', message: '密码不能为空' },
      { type: 'password', message: '密码不能少于六位' }
    ]
    const repeatPasswordRule: RuleProps = [
      { type: 'required', message: '密码不能为空' },
      {
        type: 'custom',
        message: '两次输入的密码不一致',
        validator () {
          return formData.repeatPasswordValue === formData.passwordValue
        }
      }
    ]
    const onSubmitForm = (res: boolean) => {
      if (res) {
        const payload = {
          email: formData.emailValue,
          nickName: formData.nickNameValue,
          password: formData.passwordValue
        }
        axios
          .post('api/users', payload)
          .then(() => {
            createMessage('注册成功 正在跳转登录页面', 'success')
            setTimeout(() => {
              router.push('/login')
            }, 1000)
          })
          .catch(e => {
            if (e === 'Internal Server Error') {
              createMessage('注册成功 正在跳转登录页面', 'success')
              setTimeout(() => {
                router.push('/login')
              }, 1000)
            }
          })
      }
    }
    return {
      emailRule,
      passwordRule,
      nickNameRule,
      repeatPasswordRule,
      formData,
      onSubmitForm
    }
  }
})
</script>
